<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script type="importmap">
        {
            "imports":{
                "three":"../node_modules/three/build/three.module.js",
                "three/addons/":"../node_modules/three/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
        import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
        const width=window.innerWidth;
        const height=window.innerHeight;

        // 创建创建场景
        const scene=new THREE.Scene();

        // // 创建3D立体坐标轴
        // const axesHelper=new THREE.AxesHelper(300);
        // // 将坐标轴添加到场景中
        // scene.add(axesHelper);

        // 创建透视相机
        const camera=new THREE.PerspectiveCamera(45,width/height,1,1000);
        // 设置相机位置
        camera.position.set(4,4,4);
        // 设置相机观察位置
        camera.lookAt(0,0,0);

        // 创建环境光
        const ambientLight=new THREE.AmbientLight(0xffffff,1);
        // 将环境光添加到场景中
        scene.add(ambientLight);

        // 创建点光源
        const pointLight=new THREE.PointLight(0xffffff,1);
        // 设置点光源的位置
        pointLight.position.set(200,200,200);
        // 将点光源添加到场景中
        scene.add(pointLight);

        // 创建渲染器
        const renderer=new THREE.WebGLRenderer({
            // 抗锯齿
            antialias:true,
            // 设置主题, 默认为false
            alpha:false
        });
        // 设置渲染尺寸
        renderer.setSize(width,height);

        // 创建一个gltf加载器
        const loader=new GLTFLoader();
        loader.load('./gltf/car_binli.gltf',(car)=>{
            // console.log(car);
            // 将立体模型添加到场景中
            scene.add(car.scene);
            // 执行一次渲染操作
            renderer.render(scene,camera);
            // 将渲染结果添加到页面中
            document.body.appendChild(renderer.domElement)

        });

        // 创建相机轨道控制器
        const controls=new OrbitControls(camera,renderer.domElement);
        // 设置相机轨道控制器的旋转角度
        controls.minPolarAngle=Math.PI/180*0;
        controls.maxPolarAngle=Math.PI/180*90;
        controls.addEventListener('change',()=>{
             // 重新执行一次渲染操作
             renderer.render(scene,camera);
        });

      
    </script>
</body>

</html>